<template>
  <div class="main-nav">
    <Affix>
    <div class="warp">
    <div class="grid-1122 pr clearfix">
      <div class="main-nav-logo fl">
        <router-link to="/">
          <img src="../assets/hkx-logo.png" alt="恒开鑫">
        </router-link>
      </div>

      <div class="nav fl">
        <ul class="nav-box clearfix">
          <li class="nav-item">
            <router-link to="/" class="nav-item-primary">
              首页
            </router-link>
          </li>
          <li class="nav-item" :class="{'nav-item-hover': ishover}" >
            <a class="nav-item-primary" @mouseenter="ishover = true" @mouseleave="ishover = false" >
              我要出借
              <i></i>
              <b></b>
            </a>
            <div class="drop-box sub-box" @mouseenter="ishover = true" @mouseleave="ishover = false" >
              <ul class="">
                <li class="sub-nav-item">
                  <router-link to="/product">
                    优选债权
                  </router-link>
                </li>
                <li class="sub-nav-item">
                  <a>智慧厨房</a>
                </li>
                <li class="sub-nav-item">
                  <a>智能垃圾箱</a>
                </li>
                <li class="sub-nav-item">
                  <a>无人收货店</a>
                </li>
              </ul>
            </div>
          </li>
          <li class="nav-item">
            <router-link to="/" class="nav-item-primary">
              安全保障
            </router-link>
          </li>
          <li class="nav-item">
            <router-link to="/" class="nav-item-primary">
              关于我们
            </router-link>
          </li>
        </ul>
      </div>
      <div class="nav-search">
        <div class="search-warp">
          <Input v-model="value4" icon="ios-search" placeholder="投资项目" style="width: 180px"></Input>
        </div>
      </div>
      <div class="nav-mask">

      </div>
    </div>
    </div>
    </Affix>
  </div>
</template>
<script>
  export default {
    components: {},
    name: 'main-menu',
    data () {
      return {
        ishover: false
      }
    },
    methods: {
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .main-nav {
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    font-family: Hiragino Sans GB,"Microsoft Yahei","微软雅黑",Arial,"宋体";
    height: 70px;
  }

  .main-nav .ivu-affix .warp {
    background-color: #fff;
    width: 2000px;
    border-bottom: 1px solid #ccc;
  }

  .main-nav .ivu-affix .warp .grid-1122 {
    margin: 0 115px;
  }
  .main-nav .main-nav-logo a {
    display: block;
    height: 51px;
    width: 126px;
  }

  .main-nav .main-nav-logo a img {
    margin-top: 5px;
  }

  .main-nav .nav {
    font-size: 16px;
    margin: 17px 0 0 370px;
    width: 582px;
    background:#fff;
  }

  .main-nav .nav .nav-box .nav-item {
    border: 1px solid #fff;
    border-radius: 3px;
    display: block;
    float: left;
    margin-right: 2px;
    text-align: center;
    width: 96px;
    height: 38px;
    line-height: 38px;
    position: static;
    transition: border-color 0.1s ease-in-out 0s;
  }
  .main-nav .nav a {
    color: #323232;
    text-decoration: none;
  }
  .main-nav .nav .nav-box .nav-item a{
    display: block;
  }
  .main-nav .nav .nav-box .nav-item a:hover{
    font-weight: 700;
    color: #d5a610;
  }

  .main-nav .nav .nav-box .nav-item-hover {
    background-color: #fff;
    border-color: #e6e6e6;
    z-index: 21000;
  }

  .main-nav .nav .nav-box .nav-item-hover .drop-box{
    visibility: visible;
  }
  .main-nav .nav .nav-box .nav-item .nav-item-primary {
    position: relative;
  }

  .main-nav .nav-mask {
    background: #fff none repeat scroll 0 0;
    border-radius: 0 3px 3px;
    display: none;
    height: 160px;
    margin-top: -3px;
    padding: 20px 0 10px;
    position: absolute;
    top: 54px;
    transition: all 0.1s ease-in-out 0s;
    width: 100%;
    z-index: 20;
  }
  .main-nav .nav-mask-show {
    display: block;
    margin-top: 0;
  }



  .main-nav .nav .nav-box .nav-item .drop-box {
    margin-top: -3px;
    opacity: 0;
    transition: opacity 0.1s ease-in-out 0s, margin-top 0.2s ease-in-out 0s, visibility 0.2s ease-in-out 0s;
  }

  .main-nav .nav .nav-box .nav-item .drop-box {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 0 3px 3px;
    left: -1px;
    padding: 10px 0;
    position: relative;
    top: 0;
    visibility: hidden;
    width: 115px;
    z-index: 100;
  }
  .main-nav .nav .nav-box .nav-item-hover .nav-item-primary b {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    display: block;
    height: 10px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 999;
  }
  .main-nav .nav .nav-box .nav-item-hover .drop-box {
    margin-top: 0;
    opacity: 1;
    visibility: visible;
  }
  .main-nav .nav .nav-box .nav-item .sub-box {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    min-height: 60px;
    padding: 20px 20px 10px;
    text-align: left;
    top: 50px;
    width: 50%;
    left: 400px;
  }
  .main-nav .nav .nav-box .nav-item .drop-box {
    position: absolute;
    top: 54px;
  }
  .main-nav .nav .nav-box .drop-box ul li{
    float: left;
  }
  .sub-box .sub-nav-item {
    font-weight: 400;
    text-align: center;
    width: 126px;
  }

  .sub-box ul li{
    border-right: 1px solid #e6e6e6;
  }
  .sub-box ul li:last-child {
    border-right: 0 none;
  }
  .sub-box ul li a:hover{
    color: #000 !important;
  }

  .main-nav .nav .nav-box .nav-item-hover .nav-item-primary {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    color: #d5a610;
    font-weight: 700;
  }

  .main-nav .nav-search {
    float: right;
    height: 36px;
    margin: -33px 0 0 20px;
    width: 190px;
  }
</style>
